import React, { Component } from 'react';
import styles from './common.css';
import { Divider, Table} from 'antd';

const columns = [
  {
    title: '术语',
    dataIndex: 'factor',
    key: 'factor',
    render: text => <span className={styles.text}>{text}</span>,
    width: '15%',
  },
  {
    title: '解释',
    dataIndex: 'explain',
    key: 'explain',
    width: '85%',
    render: text => <div className={styles.text}>{text}</div>,
  }
];

const data = [
  {
    key: '1',
    factor: '职位',
    explain: '也叫岗位，用工单位给具体工作内容做的归类划分。在兼职领域，职位有工作的开始结束时间、地点、职位描述等属性。一个职位可以有多名员工参与',
  },
  {
    key: '2',
    factor: '兼职员',
    explain: '参与兼职的人',
  },
  {
    key: '3',
    factor: '工作',
    explain: '兼职员和职位的结合',
  },
  {
    key: '4',
    factor: '管理员',
    explain: '用工单位指派的在【职位管理小程序】上发布和管理职位的人',
  },
  {
    key: '5',
    factor: '结算周期',
    explain: (
      <div>
        <p>对工作时长进行分段划分，逐段发放工资。如果每段时长都为T，那么T叫结算周期；</p>
        <p>举例：公司A在1号到2号每天需要两名保安，工资日结.兼职员E1和E2报名并参加了这个职位。 那么【保安】就是职位，【保安·E1】是一个工作，【保安·E2】是另外一个工作。结算周期为1天</p>
      </div>
    ),
  },
  {
    key: '6',
    factor: '职位状态',
    explain: (
      <div>
        <p>职位有 草稿/开放/满员/未结清/已结清 5种状态</p>
        <p>草稿状态的职位未参与的兼职人员无法看到，仅供管理员复查预览修改使用；</p>
        <p>当管理员发布职位以后，职位变为开放状态。开放状态的职位兼职人员可以查看到，并且可以报名。对此状态的职位，管理员仅能做有限修改；</p>
        <p>开放状态的职位报名人数等于拟招聘人数后，职位状态变为满员。满员状态的职位未参与的兼职人员无法看到。对此状态的职位，管理员仅能做有限修改；</p>
        <p>管理员给所有需要发放（参见工作状态）工资的人发放工资后，职位状态会变为结清。结清的职位对为参与的兼职人员不可见，不可修改；</p>
      </div>
    ),
  },
  {
    key: '7',
    factor: '工作状态',
    explain: '工作有9个状态，分别为 申请/取消/录用/拒绝/签到/未到/签退/未完/结算',
  },
  {
    key: '8',
    factor: '考勤员',
    explain: '用来维护单个职位的工作人员。考勤员仅有对工作的签到和签退能力',
  },
  {
    key: '9',
    factor: '分享奖励（佣金/推荐奖励）',
    explain: '此奖励用户激励用户分享，用户端有奖励金排名选项，奖励金越高排名越高，转发流量越大',
  },
  {
    key: '10',
    factor: '保障金',
    explain: '设置了保障金的职位，用户在报名时需要支付等额的保障金，保障金由平台管理。发放工资后保障金将由平台退还给用户',
  },
]


export default class AccountManagement extends Component {

  render() {
    return(
      <div className={styles.content}>
        <div className={styles.header}>术语说明</div>
        <Divider />
        <div className={styles.table}>
          <Table columns={columns} dataSource={data} pagination={false} />
        </div>
        <div className={styles.footer}>网站管理员：任彦达；手机/微信：13302175270</div>
      </div>
    );
  }
};